import React, { Component } from 'react';
import {StyleSheet, Text, View, DeviceEventEmitter, Platform} from 'react-native';
import SegmentedControlTab from "react-native-segmented-control-tab";
import OrderAll from './order-all/OrderAll'
import OrderBuy from './order-buy/OrderBuy'
import OrderSell from './order-sell/OrderSell'
import {i18n} from "../../utils/locales/i18n";
import {getUserInfo} from "../../utils/login";
import {DeviceStorage} from "../../utils/DeviceStorage";

type Props = {};
export default class OrderScreen extends Component<Props> {
	static navigationOptions = ({ navigation }) => {
		return {
			header : null,
			headerBackTitle: null,
			headerTintColor: '#0f0f0f'
		}
	}
	constructor() {
		super()
		this.state = {
			selectedIndex: 0
		}
	}
	componentWillMount(): void {
		DeviceEventEmitter.emit('read')
		this._getUserInfo()
	}
	_getUserInfo = async () => {
		await getUserInfo()
		const jwt = await DeviceStorage.get('jwt')
		if (jwt) {
			const userInfoJson = await DeviceStorage.get('user_info')
		} else {
			// 没有登录，跳到登录页
			this.props.navigation.navigate('LoginScreen')
		}
	}

	changeTab = (index) => {
		this.setState({
			selectedIndex: index
		})
	}
	toBuy = (orderNumber) => {
		this.props.navigation.navigate('BuyOrder', { orderNumber })
	}
	toSell = (orderNumber) => {
		this.props.navigation.navigate('SellOrder', { orderNumber })
	}
	render() {
		return (
			<View style={styles.container}>
				<View style={styles.header}>
					<View style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}>
						<View style={{width: '50%'}}>
							<SegmentedControlTab
								values={[i18n.t('i67'), i18n.t('i68'), i18n.t('i69')]}
								selectedIndex={this.state.selectedIndex}
								tabStyle={{backgroundColor: '#fff', borderColor: '#ff7706' }}
								activeTabStyle={{backgroundColor: '#ff7706'}}
								tabTextStyle={{color: '#ff7706', fontSize: 16}}
								activeTabTextStyle={{color: '#fff'}}
								onTabPress={this.changeTab}
							/>
						</View>
					</View>
				</View>
				{ this.state.selectedIndex === 0 ? (
					<OrderAll toBuy={this.toBuy} toSell={this.toSell}/>
				) : ( this.state.selectedIndex === 1 ? (
					<OrderBuy toBuy={this.toBuy} toSell={this.toSell}/>
				) : (
					<OrderSell toBuy={this.toBuy} toSell={this.toSell}/>
				)) }
			</View>

		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#f2f2f2',
	},
	header: {
		height: Platform.OS === 'ios' ? 90 : 70,
		paddingTop: Platform.OS === 'ios' ? 20 : 0,
		width: '100%',
		backgroundColor: '#fff'
	},
	wrapper: {
		flex: 1,
		width: '95%',
		borderRadius: 10,
		backgroundColor: '#fff',
		marginTop: 10
	}
});
